<template>
    <div>
         <div id="box">
            <span class="fa fa-home">
             <p class="ppp" >首页</p>
         </span>
            <span class="fa fa-heart-o">
            <p class="ppp">收藏</p>
        </span>
            <span class="fa fa-cart-plus">
            <p class="ppp">购物车</p>
        </span>
            <div id="bo">
                <span>立即购买</span>
            </div>
            <div id="ox">
                <span @click="add">加入购物车</span>
            </div>
        </div>

    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    #box {
        cursor: pointer;
        background-color: white;
        width: 100%;
        height: 50px;
        position: fixed;
        position: absolute;
        left: 0;
        bottom: 70px;
        border-top: solid 1px #cccccc;
    }

    #bo {
        background-color: red;
        width: 100px;
        height: 50px;
        position: absolute;
        right: 0;
        bottom: 0;
        text-align: center;
        line-height: 50px;
        color: white;
        font-size: 15px;
    }

    #ox {
        background-color: #333333;
        width: 100px;
        height: 50px;
        position: absolute;
        right: 100px;
        bottom: 0px;
        text-align: center;
        line-height: 50px;
        color: white;
        font-size: 15px;
    }

    .fa {
        color: #6B7274;
        font-size: 25px;
        /*position: absolute;*/
        margin-left: 20px;
        line-height: 25px;
        margin-top: 5px;
    }

    .ppp {
        font-size: 12px;
        margin: 0;
        color: #333333;
    }

</style>